<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<s-query perms="doo:item" @click="findPage" add="true" @addClick="handleAdd">
				<s-item v-model="filters.itemId"></s-item>
				<el-form-item>
					<el-input v-model="filters.doNo" placeholder="单据编号" :style="{ width: '155px' }"></el-input>
				</el-form-item>
				<s-dict name="doType" :min="11" :max="90" v-model="filters.doType"> </s-dict>

				<s-dict name="doStatus" v-model="filters.status"> </s-dict>
				<s-date @dateChange="function (v) { filters.createBeginTime = v }" placeholder="开始时间" />
				<s-date @dateChange="function (v) { filters.createEndTime = v }" placeholder="结束时间" />

			</s-query>
			<s-reflash reflash="true" excel="true" @findPage="findPage" @exportExcel="exportExcel">
			  <el-tooltip content=" 用友-销售出库" placement="top">
					<el-button icon="fa fa-database" @click="syncYongyou(11)" />
				</el-tooltip>
				 
			</s-reflash>



		</div>
		<!--表格内容栏-->
		<div class="gk-layout-main">
			<el-table :data="pageResult.content" class='gk-main-table' height="250" v-loading="loading" size="mini"
				align="left" style="width:100%;">
				<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
					<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
				</el-table-column>
				<column prop="doNo" label="出库单号" />
				<column prop="doType" label="出库类型" :formatter="selectionFormat" />
				<column prop="remark" label="备注" />
				<column prop="status" label="状态" :formatter="selectionFormat" />

				<column prop="createTime" :label="$t('beginTime')" :formatter="dateFormat" />
				<column prop="finshTime" :label="$t('finshTime')" :formatter="OverdateFormat" />

				<el-table-column header-align="center" align="center" width="300" :label="$t('action.operation')">
					<template slot-scope="scope">
						<kt-delete-button v-if="scope.row.status == 1||scope.row.status == 2" perms="doo:item:delete" @click="handleDelete(scope.$index, scope.row)" />
						<kt-button :label="scope.row.status <3?'编辑':'查看'" perms="doo:item:edit" @click="handleEdit(scope.$index, scope.row)" />
						<kt-button label="生成" v-if="scope.row.status <9" perms="doo:item:edit" @click="handleGenerate(scope.$index, scope.row)" />
						<kt-button icon="fa fa-eye"  label=" " title="待出库" v-if="scope.row.status <9" perms="doo:item:edit" @click="showCsds(scope.$index, scope.row)" />
						<kt-button icon="fa fa-server" label=" "  title="出库记录" v-if="scope.row.status >1" perms="doo:item:edit" @click="showHis(scope.$index, scope.row)" />
						<kt-button icon="fa fa-check"   label=" " title="手动完成" v-if="scope.row.status <9  && scope.row.status >0" perms="doo:item:edit" @click="finsh(scope.$index, scope.row)" />
					</template>
				</el-table-column>


			</el-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">

			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div> 
		<doo-item :key="componentKey" ref="editItmeOut" :subDataForm="dataForm" :dialogVisible="dialogVisible1" :add="add"
			:stnOut="this.filters.stn" @receiptHidden="receiptHidden"></doo-item>

		<csds :dialogVisible="csdsVisible" :dataList="csdsData" @csdsHidden="csdsHidden" ></csds>

		<el-dialog title="出库记录" width="80%" :visible.sync="hisdialogVisible" custom-class="myHeadClass" :close-on-click-modal="false"  :before-close="handleClose" >

			<div class="gk-layout-container">
				<div class="gk-layout-main" style="height:450px">
					<el-table :data="hisList" :key="componentKeyHis" class='gk-main-table' :loading="loading"
						size="mini" align="left" style="width:100%; overflow:auto;">
						<el-table-column :label="$t('action.desc')" width="50" fixed="left" header-align="center"
							align="center">
							<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
						</el-table-column>
						<Column prop="itemId" label="物料名称" width=500 :formatter="itemFilter" /> 
						<Column label="数量" prop="countDb" :formatter="countFormat" />
						<!--<Column prop="status" label="状态" :formatter="selectionFormat2" /> -->
						<Column prop="createTime" label="出库时间" :formatter="dateFormat" /> 
						<Column prop="outTime" label="出库时间" :formatter="dateFormat" /> 
					</el-table>
				</div>
			</div>

		</el-dialog>

	</div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"

import KtButton from "@/views/Core/KtButton"
import SDate from "@/components/Kj/SDate"
import SQuery from "@/components/Kj/SQuery"
import SReflash from "@/components/Kj/SReflash"
import SDict from "@/components/Kj/SDict"
import { format } from "@/utils/datetime"
import SItem from "@/components/Kj/SItem"
import Column from "@/views/Core/Column"
import DooItem from "./DooItem"
import { baseUrl } from '@/utils/global'

import { dictsFormat, getItemName } from "@/utils/myUtil"
import KtDeleteButton from "@/views/Core/KtDeleteButton"
import Csds from "@/dialog/Csds"
export default {
	components: {
		PopupTreeInput,
Csds,
		KtButton, SDict,
		SDate, SQuery,
		DooItem,
		KtDeleteButton,
		Column, SReflash, SItem
	},
	data() {
		return {
			size: 'small',
			filters: {
				doNo: '',
				remark: "",
				outType: 2000,
				pageNum: 1,
				pageSize: this.global.pageSize
			},
			loading: false,
			componentKey: 0,
			componentKeyHis:0,
			baseUrl: baseUrl,


			pageResult: {},
			csdsData:[],
			hisList:[],
			csdsVisible:false,
			exportUrl: "receiptOut/ExportExcel",  //导出excel路径
			add: false, // true:新增, false:编辑
			dialogVisible1: false, // 新增编辑界面是否显示
			hisdialogVisible:false,
			editLoading: false,
			stockInList: [],
			// 新增编辑界面数据
			dataForm: {
				id: 0,

			}, 
			roles: []

		}
	},
	computed: {

	},
	methods: {
		receiptHidden: function () {

			this.dialogVisible1 = false;
			this.findPage(-1);
		},

		csdsHidden: function () {

			this.csdsVisible = false;
	 
		},
		// 获取分页数据
		findPage: function (data) {
			if (data != -1) {
				data = data || 1
				this.filters.pageNum = data

			}

			this.$api.doo.findPage(this.filters).then((res) => {
				this.pageResult = res.data
			})
		},
		countFormat: function (row, column, cellValue, index) {
			return cellValue + dictsFormat("units", row.unit)
		},
		handleClose:function(){
			this.hisdialogVisible=false 
		},
		//导出的方法
		exportExcel(xlsExport) {
			this.filters.pageSize = -1

			this.$api.doo.getWhDoiDetList(this.filters).then((res) => {
				const tHeader = ['单号', '物料编码', '物料名称', '物料规格', '完成数量', '订单时间', '单位'];
				const filterVal = ['doNo', 'code', 'name', 'gg', 'finshCount', 'createTime', 'unit'];
				const list = res.data;
				for (var i = 0; i < list.length; i++) {
					list[i].unit = dictsFormat('units', list[i].unit);
				}
				xlsExport(tHeader, filterVal, list, '出库单明细导出');
			})
		},
		// 批量删除
		handleDelete: function (index, data) {
			let params = [{ 'id': data.id }]
			this.$api.doo.batchDelete(params).then((res) => {
				if (res.code == 200) {
					this.$message({ message: '操作成功', type: 'success' })
					this.findPage(this.filters.pageNum)
				} else {
					this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
				}
			})
		},
		syncYongyou(t){
			this.$api.report.sync(t).then((res) => {
				this.$message({ message: res.msg, type: 'success' });
			}) 
		},
		// 显示打印界面
		handlePreview: function (myPrint) {

			this.$api.doo.findReceiptOutPage(this.filters).then((res) => {

				this.$api.doo.Preview(res.data.content[0]).then((res) => {
					var strList = res.data;
					var html = strList.html;

					if (strList.outList.length > 0) {
						html = html.replace("{receiptNo}", strList.outList[0].receiptNo);
					}
					var detail = "";
					var details = strList.outDetailList;
					if (details.length > 0) {
						for (let index = 0; index < details.length; index++) {
							var det = details[index];
							detail += "<tr>";
							detail += "<td>" + (det.batchNo == null ? '' : det.batchNo) + "</td>";
							detail += "<td>" + (det.itemName == null ? '' : det.itemName) + "</td>";
							detail += "<td>" + (det.planCount == null ? 0 : det.planCount) + "</td>";
							detail += "<td>" + (det.finishCount == null ? 0 : det.finishCount) + "</td>";
							detail += "<td>" + (det.stn == null ? '' : det.stn) + "</td>";
							detail += "</tr>";
						}
					}
					html = html.replace("{Content}", detail);

					myPrint("title", html);


				})
			})

		},


		handleAdd: function () {

			this.componentKey += 1;
			this.dialogVisible1 = true
			this.add = true
			this.dataForm = {
				id: 0, 
			}
		},
		// 生成任务
		handleGenerate: function (index, row) {

			this.$confirm('确定生成任务吗？', '提示', {}).then(() => {
				this.$api.doo.otheroutGenerate(row).then((res) => {
					if (res.code == 200) {
						this.$message({ message: '操作成功', type: 'success' })
						this.findPage(-1)
					} else {
						this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
					}
				})
			})
		},
	 	itemFilter: function (row, column, cellValue, index) {
			return getItemName(cellValue)
		},
		showCsds: function (index, row) { 
				this.$api.doo.csds(row).then((res) => {
					if (res.code == 200) {
						this.csdsData=res.data
						this. csdsVisible=true
					} else {
						this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
					}
				})
		 
		},
		selectionFormat2: function (row, column, cellValue, index) {
			let key =  "stockStatus" 
			return dictsFormat(key, cellValue)
		}, 
		showHis: function (index, row) { 
			this.$api.doo.csdsHis(row).then((res) => {
				if (res.code == 200) {
					this.hisList=res.data
					this. hisdialogVisible=true
				} else {
					this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
				}
			}) 
		},
		finsh: function (index, row) {

	 
				this.$api.doo.finsh(row).then((res) => {
					if (res.code == 200) {
						this.$message({ message:  res.data, type: 'error' })
					 	this.findPage(-1);
					} else {
						this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
					}
				})
		 
		},
		// 显示编辑界面
		handleEdit: function (params, row) {
			this.dialogVisible1 = true
			this.operation = false
			this.dataForm = Object.assign({}, row)
			this.$refs.editItmeOut.getDetials();
		},
		// 时间格式化
		dateFormat: function (row, column, cellValue, index) {
			return format(row[column.property])
		},
		OverdateFormat: function (row, column, cellValue, index) {

			if (row.status > 3) {
				return format(row[column.property]);
			}
			else {
				return "";
			}

		},

		selectionFormat: function (row, column, cellValue, index) {
			let key = ""
			let propt = column.property;
			if (propt == "status") {
				key = "doStatus"
			} else {
				key = propt
			}
			return dictsFormat(key, cellValue)
		},


	},
	created() {

	},
	mounted() {


		this.findPage(1);
	},
	watch: {
		$route(to, from) {
			console.log(to.path);
			this.filters.outType = parseInt(to.path.substr(to.path.lastIndexOf('/') + 1))
			this.findPage(1);
		}
	}
}
</script>

<style scoped></style>